import AnchorTitle from '@/src/app/components/anchor-title'
import Breadcrumb from '@/src/app/components/breadcrumb'
import { getTranslations } from 'next-intl/server'
import DropDownMobile from '../components/dropdown-mobile'
import Filter from '../components/filter-pc'
import { cookies } from 'next/headers'
import { fetcher } from '@/src/utils/fetcher'
import FilterMobile from '../components/filter-mobile'

interface LayoutProps {
  children: React.ReactNode
}

const Layout: React.FC<LayoutProps> = async (props) => {
  const { children } = props
  const [t, bt] = await Promise.all([
    getTranslations('products'),
    getTranslations('breadcrumb'),
  ])

  const cookieStore = cookies()
  const [industries, manufacturer, models] = await Promise.all([
    fetcher<ProductCategory[]>('/api/index/cpFenlei', { cookieStore }).then(
      (res) => res.sort((a, b) => a.id - b.id)
    ),
    fetcher<Manufacturer[]>('/api/index/manufacturer', { cookieStore }).then(
      (res) => res.sort((a, b) => a.id - b.id)
    ),
    fetcher<Model[]>('/api/index/zmodel', { cookieStore }).then((res) =>
      res.sort((a, b) => a.id - b.id)
    ),
  ])
  const initialIndustryId = industries[0].id
  return (
    <>
      <div className='px-[0.9375rem] lg:px-0 lg:max-w-[960px] lg:mx-auto 2xl:max-w-[1200px]'>
        {/* 面包屑 */}
        <div className='hidden lg:block'>
          <div className='h-8 2xl:h-12' />
          <Breadcrumb
            items={[
              { label: bt('home'), path: '/' },
              { label: bt('productIntroduction'), active: true },
            ]}
          />
        </div>
        <div
          id='productIntroduction'
          className='h-[1.875rem] lg:h-[2.1875rem] 2xl:h-[3.28125rem]'
        />
        <AnchorTitle title={t('productIntroduction')}>
          <FilterMobile
            industries={industries}
            initialIndustryId={initialIndustryId.toString()}
            filterLabel={t('filter')}
            industryLabel={t('industry')}
            categoryLabel={t('category')}
          />
        </AnchorTitle>
        <div className='h-4 lg:h-[1.625rem] 2xl:h-[2.4375rem]' />
        {/* 选项卡 */}
        <div className='lg:hidden flex justify-between items-center'>
          <DropDownMobile tag='industry' items={industries}>
            {t('industry')}
          </DropDownMobile>
          <DropDownMobile tag='category' items={industries}>
            {t('category')}
          </DropDownMobile>
          <DropDownMobile tag='manufacturer' items={manufacturer}>
            {t('manufacturer')}
          </DropDownMobile>
          <DropDownMobile tag='model' items={models}>
            {t('model')}
          </DropDownMobile>
        </div>
        {/* PC Filter */}
        <Filter
          industryLabel={t('industry')}
          categoryLabel={t('category')}
          manufacturerLabel={t('manufacturer')}
          modelLabel={t('model')}
          updateButtonLabel={t('update')}
          industries={industries}
          manufacturerItems={manufacturer}
          modelItems={models}
          initialIndustryId={initialIndustryId.toString()}
        />
        <div className='h-[0.9375rem] lg:h-4 2xl:h-6' />

        {/* 列表 */}
        {children}
      </div>
    </>
  )
}

export default Layout
